import React, { Component } from 'react'

class SetData extends Component {
  state = {
    count: 0,
  }

  componentDidMount() {
    setTimeout(() => {
      // 同步的
      this.setState({
        count: 1,
      })
      console.log(this.state.count)
    }, 2000)
  }

  /**
   * @param {*} 对象语法
   * 1. 异步的
   * 2. 多次执行，修个一个state数据的时候，只执行最后一次
   */
  add = (e) => {
    this.setState(
      {
        count: this.state.count + 1,
      },
      () => {
        console.log('获取最新的state的数据：', this.state.count)
      }
    )
    this.setState(
      {
        count: this.state.count + 2,
      },
      () => {
        console.log('获取最新的state的数据：', this.state.count)
      }
    )
    this.setState(
      {
        count: this.state.count + 3,
      },
      () => {
        console.log('获取最新的state的数据：', this.state.count)
      }
    )
    console.log(this.state.count)
  }

  /**
   *
   * @param {*} 函数语法
   * 1. 异步的
   * 3. 多次执行，都会被执行
   */
  add2 = () => {
    /**
     * state=>最新的state
     * props=>最新的props
     */
    this.setState(
      (state, props) => ({ count: state.count + 1 }),
      () => {
        console.log('获取最新的state的数据：', this.state.count)
      }
    )
    this.setState(
      (state, props) => ({ count: state.count + 10 }),
      () => {
        console.log('获取最新的state的数据：', this.state.count)
      }
    )
    this.setState(
      (state, props) => ({ count: state.count + 20 }),
      () => {
        console.log('获取最新的state的数据：', this.state.count)
      }
    )
    console.log(this.state.count)
  }

  render() {
    return (
      <div>
        <h1>setState()深入</h1>
        <p>{this.state.count}</p>
        <button onClick={this.add}>对象语法</button>
        <button onClick={this.add2}>函数语法</button>
      </div>
    )
  }
}

export default SetData
